<template>
	<view class="item" v-if="isLoaded">
		<view class="time-title">
			<text>选择预约时间段</text>
		</view>
		<view class="time-root">
			<view class="time-item" :class="{ 'active': !isTimeSelected(1), 'selected': isTimeSelected(1, true) }"
				@click="selectTime(1)">
				<text>8:00 — 10:00</text>
				<view class="ic-dui" v-if="isTimeSelected(1, true)">
					<uni-icons type="checkmarkempty" size="22" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="time-item" :class="{ 'active': !isTimeSelected(2), 'selected': isTimeSelected(2, true) }"
				@click="selectTime(2)">
				<text>10:00 — 12:00</text>
				<view class="ic-dui" v-if="isTimeSelected(2, true)">
					<uni-icons type="checkmarkempty" size="22" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="time-item" :class="{ 'active': !isTimeSelected(3), 'selected': isTimeSelected(3, true) }"
				@click="selectTime(3)">
				<text>14:00 — 16:00</text>
				<view class="ic-dui" v-if="isTimeSelected(3, true)">
					<uni-icons type="checkmarkempty" size="22" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="time-item" :class="{ 'active': !isTimeSelected(4), 'selected': isTimeSelected(4, true) }"
				@click="selectTime(4)">
				<text>16:00 — 18:00</text>
				<view class="ic-dui" v-if="isTimeSelected(4, true)">
					<uni-icons type="checkmarkempty" size="22" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>


<script lang="ts" setup>
import { defineProps, ref, defineEmits, onMounted, defineExpose } from 'vue'
import db from '@/api/database'

const emit = defineEmits(['selectTime'])

defineExpose({
	getYysd
})

const props = defineProps({
	item: {
		type: Object,
		default: {},
	},
	isShowStatus: {
		type: Boolean,
		default: false,
	},
	confirmDate: {
		type: Object,
		default: () => ({})
	}
})

// 使用ref来存储选中的时间段
const selectedTimeSlots = ref<number[]>([])
const yysd = ref([])
const isLoaded = ref(false)

onMounted(() => {
	getYysd()
})

async function getYysd() {
	try {
		const res = await db.collection('yyjl').where({
			date: `${props.confirmDate.year}-${String(props.confirmDate.month).padStart(2, '0')}-${String(props.confirmDate.day).padStart(2, '0')}`,
			sbID: props.item._id,
			status: '已预约'
		}).get()
		console.log('预约记录:', res.data)
		yysd.value = res.data.reduce((acc, curr) => {
			return acc.concat(curr.time)
		}, [])
		console.log('预约时段:', yysd.value)
		isLoaded.value = true
	} catch (err) {
		console.log('查询预约记录失败:', err)
		isLoaded.value = true
	}
}

// 判断是否选择了某个时间段
const isTimeSelected = (timeSlot: number, checkOnly: boolean = false) => {
	// 如果 checkOnly 为 true，则表示只是检查是否已经选择
	if (checkOnly) {
		return selectedTimeSlots.value.includes(timeSlot)
	}

	// 获取当前时间
	const now = new Date()
	const currentHour = now.getHours()
	const currentMinute = now.getMinutes()

	// 获取预约日期
	const reservationDate = new Date(
		props.confirmDate.year,
		props.confirmDate.month - 1,
		props.confirmDate.day
	)

	// 定义时间段对应的开始时间
	const timeSlotStartHours = {
		1: 8,  // 8:00
		2: 10, // 10:00
		3: 14, // 14:00
		4: 16  // 16:00
	}

	// 判断是否是当天
	const isToday = reservationDate.getDate() === now.getDate() &&
		reservationDate.getMonth() === now.getMonth() &&
		reservationDate.getFullYear() === now.getFullYear()

	// 如果是当天，才判断时间是否超过
	if (isToday) {
		if (currentHour > timeSlotStartHours[timeSlot] ||
			(currentHour === timeSlotStartHours[timeSlot] && currentMinute > 0)) {
			return false
		}
	}

	if (props.item.status !== "可预约" && props.item.status !== "5") {
		return false
	} else {
		return !(yysd.value && yysd.value.toString().includes(timeSlot.toString()));
	}
}

// 处理时间段的点击事件
const selectTime = (timeSlot: number) => {
	const index = selectedTimeSlots.value.indexOf(timeSlot);
	if (isTimeSelected(timeSlot)) {
		if (index !== -1) {
			selectedTimeSlots.value.splice(index, 1);
		} else {
			selectedTimeSlots.value.push(timeSlot);
		}
	}
	emit('selectTime', selectedTimeSlots.value)
}
</script>


<style lang="scss" scoped>
@import "/static/css/iconfont.css";

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.02);
	}

	100% {
		transform: scale(1);
	}
}

.item {
	padding: 15px 15px 5px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	animation: fadeIn 0.3s ease-out;

	.time-title {
		margin-bottom: 15px;
		text-align: center;

		text {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
	}
}

.time-root {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.time-item {
		font-size: 15px;
		width: 48%;
		background-color: #e8f7e8;
		color: #1c5324;
		border: 1px solid #4cd964;
		border-radius: 8px;
		padding: 15px 0;
		text-align: center;
		margin-bottom: 10px;
		position: relative;
		overflow: hidden;
		transition: all 0.2s ease;

		&:active:not(.active) {
			transform: scale(0.98);
		}
	}

	.time-item.active {
		border: 1px solid #e0e0e0;
		background-color: #f5f5f5;
		color: #999;
		cursor: not-allowed;
	}

	/* 选中的时间段样式 */
	.time-item.selected {
		background-color: #2196f3;
		border: 1px solid #2196f3;
		color: white;
		box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);

		.ic-dui {
			padding: 6px 0 0 6px;
			box-sizing: border-box;
			width: 60px;
			height: 60px;
			background-color: #4cd864;
			border-radius: 50px;
			position: absolute;
			right: -32px;
			bottom: -32px;
			display: flex;
			animation: pulse 0.2s;
		}
	}
}
</style>